<template>
	<view class="mine-content">
		<view class="user-card">
			<image src="@/static/mineBG.png" mode=""></image>
			<view class="user-box">
				<view class="user-info" v-if="isLogin">
					<u-avatar :src="userInfo.avatar" size="large"></u-avatar>
					<view class="user-detail">
						<view class="user-name">{{userInfo.nickName}}</view>
						<view class="user-role">
							{{userInfo.userType == 1 ? '租户' : userInfo.userType == 2 ?  '房源商' : '销售员'}}
						</view>
					</view>
				</view>
				<view class="user-info" v-if="!isLogin" @click="gotoLogin">
					<u-avatar :src="userInfo.avatar" size="large"></u-avatar>
					<view class="user-detail">
						<view class="user-name">租房獾</view>
						<view class="user-role">
							未登录
						</view>
					</view>
				</view>
				<view class="user-share" @click="shareMyHouse" v-if="userInfo.userType == 2">
					<u-icon name="share" size="42" color="#fff"></u-icon>
					<view>分享我的发布</view>
				</view>
			</view>
			<view class="re-login" @click="reLogin">
				重新登录
			</view>
		</view>
		<view class="menu-box">
			<view class="income-box" v-if="userInfo.userType != 1">
				本月收益：<text>￥{{monthMoney}}</text>
			</view>
			<view class="menu-list">
				<view class="menu-item" @click="gotoNext('orderCenter')" v-if="userInfo.userType == 1">
					<u-icon name="order" size="42"></u-icon>
					<view>订单中心</view>
				</view>
				<view class="menu-item" @click="gotoNext('withdrawalOrder')" v-if="userInfo.userType != 1">
					<u-icon name="bookmark" size="42"></u-icon>
					<view>提现订单</view>
				</view>
				<view class="menu-item" @click="gotoNext('personCenter')">
					<u-icon name="man-add-fill" size="42"></u-icon>
					<view>账户信息</view>
				</view>
				<view class="menu-item" @click="gotoNext('checkOut')" v-if="userInfo.userType != 1">
					<u-icon name="bookmark-fill" size="42"></u-icon>
					<view>提现记录</view>
				</view>
				<!-- <view class="menu-item" @click="reLogin">
					<u-icon name="tags-fill" size="42"></u-icon>
					<view>重新登录</view>
				</view> -->
			</view>
		</view>
		<view class="my-release">
			<!-- <u-subsection :list="list" bgColor="rgb(19, 117, 210)" inactive-color="rgb(19, 117, 210)"
				active-color='#fff' :current="houseType" @change="houseTypeChange"></u-subsection> -->
			<view class="search-input">
				<text>我的发布</text>
				<u-search shape="round" placeholder="搜索我的房源。" v-model="queryForm.keywords" @custom='searchQuery'></u-search>
			</view>
			<u-waterfall ref="uWaterfall" v-model="flowList">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load threshold="-450" height='240' img-mode='scaleToFill' border-radius="10"
							:image="item.images[0]" error-img="../../static/noneBG.jpg" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-bottom">
							<view class="demo-price">
								{{item.price}}元/月
							</view>
						</view>
						<view class="operate-menu">
							<view class="menu-item" @click="editHouse(item.id)">
								编辑
							</view>
							<view class="menu-item" @click="delMyHouse(item.id)">
								删除
							</view>
						</view>
						<view class="demo-type">
							{{item.tags}}
						</view>
						<view class="demo-top" v-if="item.isTop == 1">
							置顶
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" height='240' img-mode='scaleToFill' border-radius="10"
							:image="item.images[0]" error-img="../../static/noneBG.jpg" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-bottom">
							<view class="demo-price">
								{{item.price}}元/月
							</view>
						</view>
						<view class="operate-menu">
							<view class="menu-item" @click="editHouse(item.id)">
								编辑
							</view>
							<view class="menu-item" @click="delMyHouse(item.id)">
								删除
							</view>
						</view>
						<view class="demo-type">
							{{item.tags}}
						</view>
						<view class="demo-top" v-if="item.isTop == 1">
							置顶
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addData"></u-loadmore>
		</view>
		<Tabbar :tabbarCurrent="tabbarCurrent"></Tabbar>
	</view>
</template>

<script>
	import {
		login
	} from "@/api/login.js"
	import {
		GetHouseListByPage,
		DelMyHouse,
		CalcFlow
	} from "@/api/index.js"
	export default {
		data() {
			return {
				tabbarCurrent: 2,
				monthMoney: 0,
				houseType: 0,
				queryForm: {
					priceStart: '',
					priceEnd: '',
					pageSize: 10,
					pageNum: 1,
					keywords: "",
					sort: '',
					tags: "",
					area: "",
					isAgency: "",
					auditStatus: "2",
					price: {
						">=": "",
						"<=": "",
						"=": "",
						"<": "",
						">": ""
					},
					openId: ""
				},
				userInfo: {},
				list: [{
					name: '我的发布'
				}, ],
				code: '',
				isLogin: '',
				flowList: []
			}
		},
		onLoad() {
			this.isLogin = uni.getStorageSync('isLogin')
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
			}
			this.onWxLogin()

		},
		onShow() {
			if (uni.getStorageSync('isLogin')) {
				this.addData()
			}
			if (uni.getStorageSync('userInfo').userType != 1) {
				this.getCalcFlow()
			}
		},
		methods: {
			searchQuery(){
				this.$nextTick(()=>{
					this.$refs.uWaterfall.clear()
				})
				this.addData()
			},
			reLogin() {
				uni.clearStorageSync()
				let appid = 'wx2451c4811732a3e4'
				let local = encodeURIComponent('https://aiyouzixun.top/#/pages/mine/index') // 获取页面url
				window.location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${ local}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect'`
			},
			shareMyHouse() {
				let href =
					`https://aiyouzixun.top/#/pages/index/index?openId=${uni.getStorageSync('userInfo').openId}`
				uni.setClipboardData({
					data: href,
					showToast: false,
					success: function() {
						uni.showToast({
							title: "复制成功,去转发吧",
							icon: "success",
							duration: 2000
						});
					},
					fail: function() {
						uni.showToast({
							title: "复制失败，请重新分享",
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			getCalcFlow() {
				CalcFlow({
					openId: uni.getStorageSync('userInfo').openId
				}).then(res => {
					this.monthMoney = res.data.income
				})
			},
			editHouse(id) {
				uni.navigateTo({
					url: '/pages/releaseHouse/index?id=' + id
				})
			},
			houseTypeChange(index) {
				if (index == 0) {
					this.queryForm.auditStatus = '2'
				} else {
					this.queryForm.auditStatus = '0'
				}
				this.$refs.uWaterfall.clear()
				this.addData()
			},
			delMyHouse(id) {
				let that = this
				let query = [id]
				uni.showModal({
					title: '提示',
					content: '是否确认删除该发布的房源',
					success: function(res) {
						if (res.confirm) {
							DelMyHouse(query).then(res => {
								uni.showToast({
									title: '删除成功'
								})
								that.$refs.uWaterfall.clear()
								that.addData()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			init() {
				this.queryForm.openId = uni.getStorageSync('userInfo').openId
				// this.userType = uni.getStorageSync('USER_TYPE')
			},
			addData() {
				this.init();
				// this.$refs.uWaterfall.clear()
				GetHouseListByPage(this.queryForm).then(res => {
					this.flowList = res.data.records
					this.flowList.forEach(item => {
						item.images = item.images.split(',')
					})
					this.$forceUpdate()
				})
			},
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			onWxLogin() {
				let _self = this
				_self.code = _self.getUrlCode().code
				if (_self.code && !_self.isLogin) {
					login({
						code: _self.code,
					}).then(res => {
						_self.userInfo = res.data
						uni.setStorageSync('Authorization', res.data.token)
						uni.setStorageSync("userInfo", res.data)
						uni.setStorageSync('USER_TYPE', res.data.userType)
						this.isLogin = true
						uni.setStorageSync('isLogin', this.isLogin)
						//清除code
						window.location.href = 'https://aiyouzixun.top/#/pages/mine/index'
					})
				}
			},
			getUrlCode() { // 截取url中的code方法
				var url = window.location.href
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(url.indexOf('?') + 1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split('=');
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				}
				return theRequest;
			},
			gotoNext(url) {
				if (this.userInfo.userType != 2 && url == 'releaseHouse') {
					uni.showModal({
						title: '提示',
						content: '您不是合作商，不能发布房源！',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					})
					return
				}
				uni.navigateTo({
					url: `/pages/${url}/index`
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-item-bg {
		background-color: #2979ff !important;
		color: #fff !important;
	}

	.user-card {
		position: relative;
		height: 350rpx;

		>image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0%;
			left: 0;
			z-index: 3;
		}

		.user-box {
			position: absolute;
			width: 90%;
			top: 130rpx;
			left: 5%;
			z-index: 6;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;

			.user-info {
				display: flex;

				.user-detail {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					.user-name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.user-role {
						padding: 5rpx 10rpx;
						background-color: #fff;
						border-radius: 5rpx;
						color: rgb(19, 117, 210);
						font-size: 26rpx;
					}
				}

			}
		}

		.user-share {
			display: flex;
			flex-direction: column;
			align-items: center;

			>view {
				margin-top: 10rpx;
			}
		}
	}

	.menu-box {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;


		.income-box {
			width: 100%;
			// text-align: center;
			padding: 15rpx 0;
			border-bottom: 1rpx solid #b4b4b4;

			>text {
				color: #bf0000;
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.menu-list {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-around;
			margin-top: 20rpx;


			.menu-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				view {
					margin-top: 5rpx;
				}
			}
		}
	}

	.my-release {

		margin-top: 20rpx;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.demo-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;

		.demo-btn {
			padding: 5rpx 10rpx;
			font-size: 24rpx;
			background-color: #d60404;
			border-radius: 15rpx;
			color: #fff;
		}

	}

	.demo-type {
		position: absolute;
		top: 30rpx;
		left: 0rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		background-color: #d60404;
		border-bottom-right-radius: 15rpx;
		border-top-right-radius: 15rpx;
		color: #fff;
	}

	.demo-top {
		position: absolute;
		top: 30rpx;
		right: 0rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		background-color: #d60404;
		border-bottom-left-radius: 15rpx;
		border-top-left-radius: 15rpx;
		color: #fff;
	}

	.operate-menu {
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.menu-item {
			padding: 5rpx 15rpx;
			border-radius: 5rpx;
			color: #fff;
			background-color: rgb(19, 117, 210);
		}
	}
	
	.search-input {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	
		>text {
			padding: 10rpx;
			background-color: #1296db;
			color: #FFFFFF;
			border-radius: 10rpx;
			font-size: 24rpx;
		}
	}
	
	.re-login{
		position: absolute;
		top: 280rpx;
		left: 24%;
		width: max-content;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		color: #1375d2;
		font-size: 24rpx;
		z-index: 99;
	}
</style>